import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { ComponentValueType } from "../../questionComponents";
import { produce } from "immer";
import { getNextSelectedId, insertNewComponent } from "../until";
//引入loadsh
import _ from "lodash";
//使用dnd-kit 这里会导致主页包的增加
import { arrayMove } from "@dnd-kit/sortable";

export type compoentInfoType = {
  fe_id: string;
  type: string; //组件类型，不能重复 ， 前后端保持一致
  title: string;
  ishidden: boolean;
  islock: boolean;
  props: ComponentValueType;
};

export type ComponentStatetype = {
  //选中的组件
  selectedId: string;
  componentList: Array<compoentInfoType>;
  //复制的组件
  copyComponent: compoentInfoType | null;
};

const initState: ComponentStatetype = {
  //默认选择的是空
  selectedId: "",
  componentList: [],
  //其他的扩展
  //复制的组件
  copyComponent: null,
};

const componentSlice = createSlice({
  name: "componentSlice",
  initialState: initState,
  reducers: {
    //重置所有组件
    resetComponent(state: ComponentStatetype, action: PayloadAction<ComponentStatetype>) {
      return action.payload;
    },
    //修改selectedId的值 表示选择的组件
    changeSelectedId(state: ComponentStatetype, action: PayloadAction<string>) {
      // state.selectedId = action.payload;
      return { ...state, selectedId: action.payload };
    },
    //添加新的组件
    addComponent: produce((draft: ComponentStatetype, action: PayloadAction<compoentInfoType>) => {
      const newComponent = action.payload;
      insertNewComponent(draft, newComponent);
    }),
    //修改组件属性
    changeComponentProps: produce((draft: ComponentStatetype, action: PayloadAction<{ fe_id: string; newProps: ComponentValueType }>) => {
      const { fe_id, newProps } = action.payload;
      //当前要修改的组件
      const curComponent = draft.componentList.find((c) => c.fe_id == fe_id);
      if (curComponent) {
        curComponent.props = {
          ...curComponent.props,
          ...newProps,
        };
      }
    }),
    //删除组件
    deleteComponent: produce((draft: ComponentStatetype) => {
      const { selectedId, componentList } = draft;
      const index = componentList.findIndex((c) => c.fe_id === selectedId);
      const newSelectedId = getNextSelectedId(selectedId, componentList);
      draft.selectedId = newSelectedId;
      if (index >= 0) {
        componentList.splice(index, 1);
      }
    }),
    //隐藏组件
    changeComponentHidden: produce((draft: ComponentStatetype, action: PayloadAction<{ isHidden: boolean }>) => {
      const { selectedId, componentList } = draft;
      const { isHidden } = action.payload;
      const curCom = componentList.find((c) => c.fe_id === selectedId);
      if (curCom == null) return;
      const newSelectedId = getNextSelectedId(selectedId, componentList);
      draft.selectedId = newSelectedId;
      curCom.ishidden = isHidden;
    }),
    //锁定解锁组件
    toogleComponentLock: produce((draft: ComponentStatetype) => {
      const { selectedId, componentList } = draft;
      const curCom = componentList.find((c) => c.fe_id === selectedId);
      if (curCom == null) return;
      curCom.islock = !curCom.islock;
    }),
    //复制组件
    copyComponentFun: produce((draft: ComponentStatetype) => {
      const { selectedId, componentList } = draft;
      const curCom = componentList.find((c) => c.fe_id === selectedId);
      if (curCom == null) return;
      //进行深拷贝
      const copyComponent = _.cloneDeep(curCom);
      draft.copyComponent = copyComponent;
    }),
    //粘贴组件
    pasteComponent: produce((draft: ComponentStatetype) => {
      const { copyComponent } = draft;
      if (copyComponent == null) return;
      // 重置fe_id
      copyComponent.fe_id = String(Math.floor(Math.random() * 100000000)).padStart(8, "0");
      insertNewComponent(draft, copyComponent);
    }),
    //上移组件
    selectPrevComponent: produce((draft: ComponentStatetype) => {
      const { selectedId, componentList } = draft;
      const index = componentList.findIndex((c) => c.fe_id === selectedId);
      if (index < 0) return;
      if (index == 0) return;
      draft.selectedId = componentList[index - 1].fe_id;
    }),
    //下移组件
    selectNextComponent: produce((draft: ComponentStatetype) => {
      const { selectedId, componentList } = draft;
      const index = componentList.findIndex((c) => c.fe_id === selectedId);
      if (index < 0) return;
      if (index + 1 == componentList.length) return;
      draft.selectedId = componentList[index + 1].fe_id;
    }),
    //移动组件位置
    moveComponent: produce((draft: ComponentStatetype, action: PayloadAction<{ oldIndex: number; newIndex: number }>) => {
      const { componentList } = draft;
      const { oldIndex, newIndex } = action.payload;
      draft.componentList = arrayMove(componentList, oldIndex, newIndex);
    }),
  },
});

export const {
  resetComponent,
  changeSelectedId,
  addComponent,
  changeComponentProps,
  deleteComponent,
  changeComponentHidden,
  toogleComponentLock,
  copyComponentFun,
  pasteComponent,
  selectPrevComponent,
  selectNextComponent,
  moveComponent,
} = componentSlice.actions;

export default componentSlice.reducer;
